<template>
<div class="tc-center fl relative">
    <rx-center-title-swiper :data="title">
        <ul class="clearfix uiTab9 j_uiTab9">
            <li :class="{'uiTab9-active':subIndex == index}" @click="subSwitch(index)" v-for="(item, index) of title" :key="index">
                {{item}}
            </li>
        </ul>
    </rx-center-title-swiper>
    <div id="j-tc-center-content">
        <div class="uiTab9Con" v-if="subIndex == 0">
            <div class="analyItem">
                <p class="analyItemTit tx-center">状态</p>
                <div class="analyItemCon"></div>
            </div>
        </div>
        <!-- 文档 -->
        <rx-lesson1 v-if="subIndex == 1"></rx-lesson1>
        <!-- 组件 -->
        <rx-lesson2 v-if="subIndex == 2"></rx-lesson2>
        <!-- 过滤器 -->
        <rx-lesson3 v-if="subIndex == 3"></rx-lesson3>
        <!-- 指令 -->
        <rx-lesson4 v-if="subIndex == 4"></rx-lesson4>
        <!-- 工具类 -->
        <rx-lesson5 v-if="subIndex == 5"></rx-lesson5>
        <!-- 样式 -->
        <rx-lesson6 v-if="subIndex == 6"></rx-lesson6>
        <!-- 全局方法 -->
        <rx-lesson7 v-if="subIndex == 7"></rx-lesson7>
        <!-- ELE -->
        <rx-lesson8 v-if="subIndex == 8"></rx-lesson8>
    </div>
    <!-- 中间路由渲染 -->
    <transition class="animated faster" enter-active-class="animated faster slideInLeft" leave-active-class="animated faster slideOutLeft">
        <router-view name="center"></router-view>
    </transition>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import rxLesson1 from './Lesson1'
import rxLesson2 from './Lesson2'
import rxLesson3 from './Lesson3'
import rxLesson4 from './Lesson4'
import rxLesson5 from './Lesson5'
import rxLesson6 from './Lesson6'
import rxLesson7 from './Lesson7'
import rxLesson8 from './Lesson8'

export default {
    components: {
        rxLesson1,
        rxLesson2,
        rxLesson3,
        rxLesson4,
        rxLesson5,
        rxLesson6,
        rxLesson7,
        rxLesson8
    },
    data () {
        return {
            title: ['状', '文档', '组件', '过滤器', '指令', '工具类', '组逻', '方法', 'ELE', '占位', '最后'],
            subIndex: 1
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    created () {

    },
    methods: {
        subSwitch (index) {
            this.subIndex = index
            this.$router.push(this.$route.matched[1].path)
        }
    }
}
</script>
